/* 全局table样式 ---end */
/* ==================================================自定义- 高度塌陷================================================== */
.sink:after {
  /* 设置添加子元素的内容是空 */
  content: '';
  /* 设置添加子元素为块级元素 */
  display: block;
  /* 设置添加的子元素的高度0 */
  height: 0;
  /* 设置添加子元素看不见 */
  visibility: hidden;
  /* 设置clear：both */
  clear: both;
}

/* ==================================================自定义- 居中================================================== */

/*
    .flex-y-end-start {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-start;
    }
    简化如下:
*/

.flex-align-items-mixins(@flexDirection, @justifyContent) {
  &-start {
    display: flex;
    flex-direction: @flexDirection;
    justify-content: @justifyContent;
    align-items: flex-start;
  }

  &-center {
    display: flex;
    flex-direction: @flexDirection;
    justify-content: @justifyContent;
    align-items: center;
  }

  &-end {
    display: flex;
    flex-direction: @flexDirection;
    justify-content: @justifyContent;
    align-items: flex-end;
  }
}

.flex-mixins(@flexDirection) {
  display: flex;
  flex-direction: @flexDirection;

  &-start {
    display: flex;
    flex-direction: @flexDirection;
    justify-content: flex-start;
    .flex-align-items-mixins(@flexDirection, flex-start);
  }

  &-center {
    display: flex;
    flex-direction: @flexDirection;
    justify-content: center;
    .flex-align-items-mixins(@flexDirection, center);
  }

  &-end {
    display: flex;
    flex-direction: @flexDirection;
    justify-content: flex-end;
    .flex-align-items-mixins(@flexDirection, flex-end);
  }

  &-between {
    display: flex;
    flex-direction: @flexDirection;
    justify-content: space-between;
    .flex-align-items-mixins(@flexDirection, space-between);
  }

  &-around {
    display: flex;
    flex-direction: @flexDirection;
    justify-content: space-around;
    .flex-align-items-mixins(@flexDirection, space-around);
  }
}

.flex {
  display: flex;

  &-0 {
    display: flex;
    // 禁止缩放
    flex: 0 0 auto;
  }

  &-1 {
    display: flex;
    // 禁止缩放
    flex: 1 1 auto;
  }

  &-wrap {
    display: flex;
    // 允许换行
    flex-wrap: wrap;
  }

  &-x {
    display: flex;
    // 横向主轴
    .flex-mixins(row);
  }

  &-y {
    display: flex;
    // 纵向主轴
    .flex-mixins(column);
  }

  &-xy {
    display: flex;
    // 横向反转主轴
    .flex-mixins(row-reverse);
  }

  &-yr {
    display: flex;
    // 纵向反转主轴
    .flex-mixins(column-reverse);
  }
}

// 三层遍历，组合所有属性值 sass 写法
// @each $direction in $directionList {
//   // 简化一些属性值
//   $dir: $direction;

//   @if $direction == 'row' {
//     $dir: 'x';
//   }

//   @if $direction == 'column' {
//     $dir: 'y';
//   }

//   @each $justifyContent in $justifyContentList {
//     // 简化一些属性值
//     $JC: $justifyContent;

//     @if $justifyContent == 'flex-start' {
//       $JC: 'start';
//     }

//     @if $justifyContent == 'flex-end' {
//       $JC: 'end';
//     }

//     @if $justifyContent == 'space-between' {
//       $JC: 'between';
//     }

//     @if $justifyContent == 'space-around' {
//       $JC: 'around';
//     }

//     @each $alignItems in $alignItemsList {
//       // 简化一些属性值
//       $AI: $alignItems;

//       @if $alignItems == 'flex-start' {
//         $AI: 'start';
//       }

//       @if $alignItems == 'flex-end' {
//         $AI: 'end';
//       }

//       .flex-#{$dir}-#{$JC}-#{$AI} {
//         display: flex;
//         flex-direction: $direction;
//         justify-content: $justifyContent;
//         align-items: $alignItems;
//       }
//     }
//   }
// }

/* ==================================================自定义- 溢出================================================== */
// 移除省略
.text-overflow-hidden {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 溢出换行
.text-warp {
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
}

//溢出不换行,不截止
.text-no-warp {
  white-space: nowrap;
  word-break: keep-all;
}